<script setup lang="ts">
import { ref, watch } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})

const loading = ref(true)
const onLoad = () => {
  loading.value = false
}

watch(
  () => props.src,
  () => {
    loading.value = true
  },
)
</script>

<template>
  <div class="pdf-preview" v-loading="loading">
    <vue-pdf-embed class="vue-pdf-embed" :source="src" @loaded="onLoad" />
  </div>
</template>

<style lang="scss" scoped>
.pdf-preview {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
  :deep(canvas) {
    width: 100% !important;
  }
}
</style>
